<template>
	<view class="content">
		<view v-if="!show">
			<view class="bgi">
				<text class="title top_title">社区管控</text>
				<up-image :src="config.getImage('bgIMage')" width="100vw" :fade="true" duration="450">
					<template v-slot:loading>
						<up-loading-icon color="red"></up-loading-icon>
					</template>
					<template #error>
						<view style="font-size: 24rpx">加载失败</view>
					</template>
				</up-image>
			</view>
			<view class="switch">
				<button v-if="isToken" :customStyle="{ border: 'none !important' }" form-type="submit" class="noLogin" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">
					<up-image :src="config.getImage('headerIMg')" shape="circle" width="80rpx" height="80rpx" :fade="true" duration="450"></up-image>
					<text class="text font28">立即登录</text>
				</button>
				<view v-else class="login">
					<view class="left">
						<up-image :src="avatarUrlCpu" shape="circle" width="80rpx" height="80rpx" :fade="true" duration="450"></up-image>
						<text>{{ userStore.users.username }}</text>
					</view>
					<view class="right" @click="toSetting">
						<image :src="config.getImage('setting_icon')" alt="" />
						<text>设置</text>
					</view>
				</view>
			</view>
			<view class="tab pdd32">
				<view v-for="(item, index) in tableListRes" :key="item.name">
					<image class="tab_tit_img" :src="item.tit_img" mode=""></image>
					<view class="tab_list" :class="{ tab_big: index == 0 }">
						<view class="tab_item" @click="() => toView(i.path)" :class="{ tab_item_big: index == 0, tab_item_small: index != 0 }" v-for="i in item.view" :key="i.name">
							<image class="tab_item_img" :src="i.img" mode=""></image>
							<view class="tab_item_text font28">{{ i.name }}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="_secces bg_color" v-else>
			<view class="con">
				<img style="width: 280rpx; height: 280rpx; margin-top: 20vh" :src="config.getImage('noLogin')" alt="" />
				<view class="modal_seccess">
					<view class="modal_text">未登录！</view>
					<view class="modal_con">你还没有登录！登录后再来试试吧！</view>
				</view>
				<button
					class="model_btn"
					:style="{
						width: '242rpx !important',
						height: '80rpx !important',
						background: '#458cff !important',
						borderRadius: '16rpx !important',
						color: ' #ffffff !important',
						lineHeight: '80rpx',
						marginTop: '48rpx'
					}"
					form-type="submit"
					open-type="getPhoneNumber"
					@getphonenumber="getPhoneNumber"
				>
					确定
				</button>
			</view>
		</view>
	</view>
	<up-toast ref="toast"></up-toast>
</template>

<script setup>
import config from '@/config.js';
import { useState } from 'hooks';
import Api from 'api';
import tableList, { tab } from './tableList';
import { usersStore } from 'store/users.js';
import changeData from 'utils/changeData.js';
const api = new Api
const userStore = usersStore();
const [rawData, setRawData] = useState('');
const [show, setShow] = useState(false);
const [avatarUrl, setAvatarUrl] = useState('');
const toast = ref(null);
const toSetting = () => {
	uni.navigateTo({
		url: '/pages/setting/setting'
	});
};
const isToken = computed(() => !userStore.users.token);
const avatarUrlCpu = computed(() => userStore.users.avatarUrl || avatarUrl);
const tableListRes = ref([]);

const toView = (path) => {
	if (!config.isLogin || userStore.users.token)
		uni.navigateTo({
			url: path
		});
	else setShow(true);
};

onShow(() => {
	//#ifdef MP-WEIXIN
	if (!userStore.users.avatarUrl) {
		uni.getUserInfo({
			provider: 'weixin',
			success: async ({ rawData }) => {
				const avatarUrl = config.server + '/applet/images/head.png';
				userStore.setUsers({ avatarUrl });
				// 成功获取微信用户信息
				setAvatarUrl(avatarUrl);
				setRawData(rawData);
			},
			fail: (err) => {
				console.log('获取用户信息失败：', err);
			}
		});
	}
	//#endif
	const list = [...tableList];
	if (!config.isLimits) {
		list[2].view.length == 3 && list[2].view.push(...tab);
		tableListRes.value = list;
	} else {
		setQuanXian();
	}
	getTreeData();
});
const getTreeData = async () => {
	const res = await api.treeList();
	const data = changeData.changeTreeData(res);
	userStore.setUsers({ assress: data });
};
const setQuanXian = () => {
	const list = [...tableList];
	if (!userStore.users.token) {
		if (list[2].view.length == 6) {
			list[2].view.splice(3);
		}
		tableListRes.value = list;
	} else {
		if (userStore.isFuJing()) {
			list[2].view.length == 3 && list[2].view.push(...tab);
			tableListRes.value = list;
		} else {
			if (list[2].view.length == 6) {
				list[2].view.splice(3);
			}
			tableListRes.value = list;
		}
	}
};
const getPhoneNumber = async (e) => {
	show && setShow(false);
	//#ifdef MP-WEIXIN
	uni.login({
		provider: 'weixin',
		onlyAuthorize: true, // 微信登录仅请求授权认证
		success: async function (event) {
			console.log(e.detail);
			const { code } = event;
			const { encryptedData, iv } = e.detail;
			const data = {
				rawData: unref(rawData),
				code,
				encryptedData,
				iv
			};
			if (!encryptedData) {
				toast.value.show({ show: true, message: '没有权限获取电话号码', type: 'error', position: 'top' });
				return;
			}
			const result = await api.wxLogin(data);
			userStore.setUsers(result);
			setQuanXian();
		},
		fail: function (err) {
			// 登录授权失败
		}
	});
	//#endif
};
</script>

<style lang="scss" scoped>
button:after {
	display: none;
}

.con {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.content {
	.bgi {
		.title {
			position: absolute;
			width: 100vw;
			text-align: center;
			top: 107rpx;
			z-index: 1;
		}
	}
	.switch {
		width: 686rpx;
		height: 112rpx;
		background: #ffffff;
		box-shadow: 0rpx 8rpx 16rpx 0rpx rgba(0, 0, 0, 0.05);
		border-radius: 56rpx;
		margin: -56rpx auto 0 auto;
		position: relative;
		overflow: hidden;
		.login {
			padding: 0 18rpx;
			height: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.left,
			.right {
				display: flex;
				align-items: center;
			}
			.left {
				text {
					margin-left: 14rpx;
					font-weight: bold;
					font-size: 28rpx;
					color: #000000;
				}
			}
			.right {
				text {
					margin-left: 6rpx;
					margin-right: 34rpx;
					font-size: 24rpx;
					color: #888888;
				}
				image {
					width: 32rpx;
					height: 32rpx;
				}
			}
		}
		.noLogin {
			height: 100%;
			width: 100%;
			display: flex;
			align-items: center;
			padding-left: 27rpx;
			border: none !important;
			background-color: #ffffff;
			.text {
				font-weight: bold;
				color: #458cff;
				margin-left: 190rpx;
			}
		}
	}
	.tab {
		.tab_tit_img {
			width: 192rpx;
			height: 52rpx;
			margin: 32rpx 0 0rpx 0;
		}
		.tab_big {
			justify-content: space-between;
			.tab_item_img {
				margin-bottom: 0rpx !important;
				margin-top: 0rpx !important;
			}
		}
		.tab_list {
			display: flex;
			flex-wrap: wrap;
			.tab_item {
				display: flex;
				flex-direction: column;
				align-items: center;
				.tab_item_img {
					margin-bottom: 16rpx;
					margin-top: 16rpx;
				}
				.tab_item_text {
					line-height: 40rpx;
					width: 120rpx;
					text-align: center;
				}
			}
			.tab_item_big {
				.tab_item_img {
					width: 206rpx;
					height: 144rpx;
				}
			}
			.tab_item_small {
				width: 170rpx;
				.tab_item_img {
					width: 96rpx;
					height: 96rpx;
				}
			}
		}
	}
}
</style>
